import React,{useEffect} from 'react';

import style from './TestLogin.module.scss';

const {ol} = window.OPENLAYERS;
let {CryptoJS} = window;

const TestLogin = () => {

    useEffect(() => {
        function base64UrlEncode(str) {
            var encodedSource = CryptoJS.enc.Base64.stringify(str);
            var reg = new RegExp('/', 'g');
            encodedSource = encodedSource.replace(/=+$/, '').replace(/\+/g, '-').replace(reg, '_');
            return encodedSource;
          }
      
          let header = JSON.stringify({
            "alg": "HS256",
            "typ": "JWT"
          })
      
      
          let accessKey = "295ebaefb3344f43baec724557658e27"; //修改自己申请的accessKey
          let secretKey = "97e1b43e9c2947f99052f8c3a9e7d38a"; //修改自己申请的secretKey
      
      
          //ak、sk和生成token建议在后端，避免前端调用的时候泄露
          let payload = JSON.stringify({
            "key": accessKey,
            "exp": new Date().setHours(new Date().getHours() + 1)
          });
      
          let before_sign = base64UrlEncode(CryptoJS.enc.Utf8.parse(header)) + '.' + base64UrlEncode(CryptoJS.enc.Utf8.parse(
            payload));
          let signature = CryptoJS.HmacSHA256(before_sign, secretKey);
          signature = base64UrlEncode(signature);
          let final_sign = before_sign + '.' + signature;
      
          const url1 =
            'https://ibcdsg.zj.gov.cn:8443/restapi/prod/IC33000020220315000001/services/wmts/emap/default/oss' //atg.biz.gettile_lab 电子地图标注服务调用地址
          const url2 =
            'https://ibcdsg.zj.gov.cn:8443/restapi/prod/IC33000020220323000008/services/wmts/emap_lab/default/oss' //atg.biz.gettile  电子地图服务调用地址
          // const url1 = 'https://bcdsg.zj.gov.cn:8443/restapi/prod/IC33000020220315000001/services/wmts/emap/default/oss'        //政务外网地址
          // const url2 = 'https://bcdsg.zj.gov.cn:8443/restapi/prod/IC33000020220323000008/services/wmts/emap_lab/default/oss'	  //政务外网地址
      
      
          const baseUrl1 = url1 + '?jwt=' + final_sign + '&x-bg-auth-type=jwt_auth' // 网关地址
          const baseUrl2 = url2 + '?jwt=' + final_sign + '&x-bg-auth-type=jwt_auth' // 网关地址
      
          var projection = ol.proj.get('EPSG:4326');
          var projectionExtent = projection.getExtent();
          var size = ol.extent.getWidth(projectionExtent) / 256;
          var resolutions = new Array(20);
          var matrixIds = new Array(20);
          for (var z = 0; z < 20; ++z) {
            // generate resolutions and matrixIds arrays for this WMTS
            resolutions[z] = size / Math.pow(2, z);
            matrixIds[z] = z;
          }
      
          var emap = new ol.layer.Tile({
            opacity: 1,
            source: new ol.source.WMTS({
              url: baseUrl1,
              layer: 'emap',
              matrixSet: 'EPSG:4326',
              format: 'image/png',
              projection: projection,
              tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
              }),
              style: 'default',
              wrapX: true
            })
          });
      
      
          var emap_lab = new ol.layer.Tile({
            opacity: 1,
            source: new ol.source.WMTS({
              url: baseUrl2,
              layer: 'emap_lab',
              matrixSet: 'EPSG:4326',
              format: 'image/png',
              projection: projection,
              tileGrid: new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent),
                resolutions: resolutions,
                matrixIds: matrixIds
              }),
              style: 'default',
              wrapX: true
            })
          });
      
      
          new ol.Map({
            layers: [emap, emap_lab], // 初始加入图层,emap电子地图,imgmap影像地图，默认影像地图不可见
            //layers : [beg_point], // 初始加入图层,emap电子地图,imgmap影像地图，默认影像地图不可见
            target: document.getElementById('olMap'), // 目标组件
            logo: false,
            view: new ol.View({
              projection: 'EPSG:4326', // 坐标系
              maxZoom: 20, // 最大层级控制
              center: [120.25664, 29.153607], // 初始中心点坐标
              zoom: 8
              // 初始层级
            })
          });
    },[]);

    return (
        <div className={style.testLogin} id='olMap'></div>
    )
};

export default TestLogin;